<template>
  <div class="app-footer">
    <div class="hd">
      <Row :gutter="20">
        <Col span="8">
          <div class="clearfix mb30">
            <i class="iconfont f24 icontelephone fl"></i>
            <div class="fl">  
                <div>0571-88888888</div>
                <div>0571-88888888</div>
            </div>
          </div>

            <div class="clearfix mb30">
              <i class="iconfont iconicon-email fl f24"></i>
              <div class="fl mt10">
                <div>yunchuangedu@163.com</div>
              </div>
            </div>

            <div class="clearfix">
              <i class="iconfont iconaddress fl f24"></i>
              <div class="fl">
                <div>杭州市余杭区高教路970号</div>
                <div>西溪联合广场6号楼708室</div>
              </div>
            </div>

        </Col>
        <Col span="8">
          <ul class="bottom-menus clearfix">
            <li v-for="(item,index) in links" :key="index">
              <router-link class="link-white" :to="item.to">{{item.title}}</router-link>
            </li>
            
          </ul>
        </Col>
        <Col span="8" class="text-right">
          <div class="text-center">
            <img src="../assets/images/index/WX20190610-130302.png" alt="" width="120">
            <p class="mt10">微信公众号</p>
          </div>
        </Col>
      </Row>

      <Row class="mt60">
        <Col class="text-center" span="24">
          Copyright&copy;{{year}} KELAIWO, All right reserved. &nbsp;&nbsp;浙ICP备19021936号-1
          <!-- <p class="mt10">
            技术支持：
            <a href="#" class="text-underline link-white">浙江云创教育科技有限公司</a>
          </p> -->
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return{
      year: new Date().getFullYear(),
      links: [
        {title: '关于云创', to: '/about'},
        {title: '云会议通用版', to: '/products/page1'},
        {title: '公司动态', to: '/news'},
        {title: '云课堂教育局版', to: '/products/page2'},
        {title: '行业资讯', to: '/news?type=2'},
        {title: '云课堂学校版', to: '/products/page3'},
        {title: '联系我们', to: '/about'},
        {title: '智能终端', to: '/products/page4'},
        {title: '开放平台', to: '/platforms'},
        {title: '周边设备', to: '/products/page5'},
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.app-footer{
  background: #000;
  color: #e2cec1;
  padding: 60px 0 30px;
  font-size:14px;
}
.bottom-menus{
  li {
    width: 50%;
    float: left;
    margin-bottom: 16px;
    a {
      color: #e2cec1;
      &:hover{
        color: #fff;
      }
    }
  } 
}
.iconfont{
  vertical-align: middle;
  margin-right: 12px;
}
.mt60{
  margin-top:50px;
}
.mb30{
  margin-bottom: 24px;
}
</style>
